﻿<template>
	<view class="dynamicModel-list-v">
		<view class="head-warp com-dropdown">
			<u-dropdown class="u-dropdown" ref="uDropdown">
				<u-dropdown-item title="排序">
					<view class="dropdown-slot-content">
						<view class="dropdown-slot-content-main">
							<u-cell-group>
								<u-cell-item @click="cellClick(item)" :arrow="false" :title="item.label" v-for="(item, index) in sortOptions" :key="index" :title-style="{ color: sortValue == item.value ? '#2979ff' : '#606266' }">
									<u-icon v-if="sortValue == item.value" name="checkbox-mark" color="#2979ff" size="32"></u-icon>
								</u-cell-item>
							</u-cell-group>
						</view>
						<view class="dropdown-slot-bg" @click="$refs.uDropdown.close()"></view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item title="筛选">
					<view class="dropdown-slot-content">
						<view class="dropdown-slot-content-main search-main">
							<view class="u-p-l-32 u-p-r-32 search-form">
								<u-form :model="searchForm" ref="searchForm" :errorType="['toast']" label-position="left" label-width="150">									
								</u-form>
							</view>
							<view class="buttom-actions">
								<u-button class="buttom-btn" @click="reset">重置</u-button>
								<u-button class="buttom-btn" type="primary" @click="closeDropdown">检索</u-button>
							</view>
						</view>
						<view class="dropdown-slot-bg" @click="$refs.uDropdown.close()"></view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<view class="search-box">
				<u-search placeholder="请输入关键词搜索" v-model="listQuery.keyword" height="72"
                          :show-action="false" @change="search" bg-color="#f0f2f6" shape="square">
				</u-search>
			</view>
		</view>
		<view class="list-warp">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false" :down="downOption" :up="upOption">
				<view class="list">
					<view class="list-box" v-for="(item, index) in list" :key="item.id">
						<u-swipe-action :index="index" :show="item.show" @click="handleClick" @open="open" :options="options" @content-click="goDetail(item.id)">
							<view class="item">
							</view>
						</u-swipe-action>
					</view>
				</view>
			</mescroll-uni>
		</view>
        <view class="com-addBtn" @click="addPage()">
			<u-icon name="plus" size="60" color="#fff" />
		</view>
	</view>
</template>

<script>
	import {getDictionaryDataSelector,getDataInterfaceRes} from '@/api/common'
    import resources from '@/libs/resources.js'
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import request from '@/utils/request'
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                sortValue: '',
                searchForm: {
				},
                downOption: {
                    use: true,
                    auto: false
                },
                upOption: {
                    page: {
                        num: 0,
                        size: 20,
                        time: null
                    },
                    empty: {
                        use: true,
                        icon: resources.message.nodata,
                        tip: "暂无数据",
                        fixed: true,
                        top: "300rpx",
                        zIndex: 5
                    },
                    textNoMore: '没有更多数据',
                    toTop: {
                        bottom: 250
                    }
                },
                list: [],
                listQuery: {
                    sort: 'desc',
                    sidx: '',
                    keyword: '',
                    json: ''
                },
                options: [
				    {
                        text: '删除',
                        style: {
                            backgroundColor: '#dd524d'
                        }
                    }
				],
                sortOptions: [
                ],
				typeOptions : [],
                typeProps:{'label':'fullName','value':'id'},
				statusOptions:[{'fullName':"即将逾期",'id':"1"},{'fullName':"逾期",'id':"2"}],
                statusProps:{'label':'fullName','value':'id'},
				timeUnitOptions:[{'fullName':"天",'id':"day"},{'fullName':"小时",'id':"hour"},{'fullName':"分钟",'id':"minute"},{'fullName':"秒",'id':"second"}],
                timeUnitProps:{'label':'fullName','value':'id'},
				messageTemplateOptions:[],
                messageTemplateProps:{'label':'fullName','value':'id'},
            }
        },
        onLoad(e) {
			this.menuIds = e.menuId
            uni.$on('refresh', () => {
                this.list = [];
                this.mescroll.resetUpScroll();
            })
			this.gettypeOptions();
        },
        onUnload() {
            uni.$off('refresh')
        },
        methods: {
			gettypeOptions(){
				getDictionaryDataSelector('459581510966602757').then(res => {
					this.typeOptions = res.data.list
				});
			},
            upCallback(page) {
                const query = {
                    currentPage: page.num,
                    pageSize: page.size,
                    ...this.listQuery,
                    ...this.searchForm,
					menuId:this.menuIds
                }
                request({
                    url: '/api/system/QmsBaseOverduesetting',
                    method: 'get',
                    data: query,
                }).then(res => {
                    if (page.num == 1) this.list = [];
                    const list = res.data.list.map(o => ({
                        show: false,
                        ...o
                    }));

                    this.mescroll.endSuccess(res.data.list.length);
                    this.list = this.list.concat(list);
                }).catch(() => {
                    this.mescroll.endErr();
                })
            },
            handleClick(index) {
			    const item = this.list[index]
                request({
                    url: '/api/system/QmsBaseOverduesetting/' + item.id,
                    method: 'delete'
                }).then(res => {
                    uni.showToast({
                        title: res.msg,
                        complete: () => {
                            this.$u.toast(res.msg)
                            this.list.splice(index, 1)
                        }
                    })
                })
            },
            open(index) {
                this.list[index].show = true;
                this.list.map((val, idx) => {
                    if (index != idx) this.list[idx].show = false;
                })
            },
			addPage() {
				this.jumPage()
			},
			jumPage(id,btnType){
				if (!id) btnType = 'btn_add'
				let query = id ? id : ''
				uni.navigateTo({
					url: './form?id='+ query+'&jurisdictionType='+btnType+'&menuIds='+this.menuIds
				})
			},
            search() {
                this.searchTimer && clearTimeout(this.searchTimer)
                this.searchTimer = setTimeout(() => {
                    this.list = [];
                    this.mescroll.resetUpScroll();
                }, 300)
            },
            goDetail(id) {
                let btnType = '';
                let s = ['btn_edit']
                if(s.includes('btn_edit')){
                    btnType = "btn_edit"
                }
                if(!btnType) return
				this.jumPage(id,btnType)
            },
            cellClick(item) {
                if (this.sortValue === item.value) return
                this.listQuery.sort = item.sort
                this.listQuery.sidx = item.sidx
                this.sortValue = item.value
                this.$refs.uDropdown.close();
                this.$nextTick(() => {
                    this.list = [];
                    this.mescroll.resetUpScroll();
                })
            },
            reset() {
                this.$refs.searchForm.resetFields()
            },
            closeDropdown() {
                this.$refs.uDropdown.close();
                this.$nextTick(() => {
                    this.list = [];
                    this.mescroll.resetUpScroll();
                })
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #f0f2f6;
        height: 100%;
        /* #ifdef MP-ALIPAY */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* #endif */
    }
</style>